<template>
  <div class="colorDiv">
     <el-dialog
      title="报警处理"
      :visible.sync="dialogVisible"
      width="66%"
      :modal="true"
      :close-on-click-modal="false"
      :append-to-body="true"
      custom-class="alert-dialog"
      :before-close="handleClose">
      <div v-if="currentAlert" class="dialog-content">
        <div class="alert-info d-flex">
          <div class="d-flex flex-y-center inputright">
            <span class="label">报警状态</span>
            <div class="inputr">
              <el-input v-model="detail.process_status_name" disabled></el-input>
            </div>
          </div>
          <div class="d-flex flex-y-center inputright">
            <span class="label">报警时间</span>
            <div class="inputr">
              <el-input v-model="detail.alert_time" disabled></el-input>
            </div>
          </div>
          <div class="d-flex flex-y-center inputright">
            <span class="label">报警位置</span>
            <div class="inputr" v-if="currentAlert.type == 'health'">
              <el-input v-model="detail.data.device.address" disabled v-if="detail.data.device"></el-input>
              <el-input  disabled v-else></el-input>
            </div>
             <div class="inputr" v-else>
              <el-input v-model="detail.data.address" disabled v-if="detail.data"></el-input>
              <el-input  disabled v-else></el-input>
            </div>
          </div>
          <div class="d-flex flex-y-center inputright">
            <span class="label">接警人</span>
            <div class="inputr" style="position: relative;">
              <el-input v-model="detail.contacts.contacts" disabled></el-input>
              <!-- <span class="personInfo" v-if="detail.contacts.contacts">推送</span> -->
            </div>
          </div>
        </div>
        <div class="alert-info d-flex">
          <div class="d-flex flex-y-center inputright">
            <span class="label">报警人</span>
            <div class="inputr" style="position: relative;">
              <el-input v-model="detail.contacts.user_name" disabled></el-input>
              <span class="personInfo" @click="showProfileDialog">个人信息</span>
            </div>
          </div>
          <!-- <div class="d-flex flex-y-center">
            <span class="label">场所备注</span>
            <div class="inputr" style="width: 780px;">
              <el-input v-model="form.remark"></el-input>
            </div>
          </div> -->
          <div class="form-item" style="margin-bottom: 0;">
            <span class="label">处理状态：</span>
            <div style="width: 198px;">
                <el-select v-model="form.status" placeholder="请选择处理状态" >
                <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
                </el-select>
            </div>
            </div>
        </div>
        
        <!-- <div class="form-item">
          <span class="label">处理状态：</span>
          <div style="width: 198px;">
             <el-select v-model="form.status" placeholder="请选择处理状态" >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div> -->
        
        <div class="form-item">
          <span class="label">处理说明：</span>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="在此处填写处理说明..."
            v-model="form.desc">
          </el-input>
        </div>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="submit" @click="handleSubmit">提交</el-button>
        <el-button @click="handleClose()">关闭</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'; // 引入mapState
export default {
  props: {
    dialogVisible:{
        type: Boolean,
        default: false
    },
    currentAlert: {
        type: Object,
        default: () => ({})
    }
  },
  data () {
    return {
        form: {
            status: '',
            desc: ''
        },
         statusOptions: [
            { value: '1', label: '未处理' },
            { value: '2', label: '处理中' },
            { value: '3', label: '已处理' }
        ],
        detail: {
            data: {
                device: {}
            }
        },
       
    };
  },
  components: {
    
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  created () {
    this.form = {
        status: '',
        desc: ''
    }
    this.getDataInfo();
    this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getDataInfo(); // 当cityId变化时重新请求数据
      }
    });

  },
  mounted () {
    
  },
  methods: {
     showProfileDialog() {
      this.$emit('showProfile', {
        user_id: this.detail.user_id
      })
    },
    handleClose() {
        this.$emit('handleClose', false)
    },
    handleSubmit() {
      if (!this.form.status) {
        this.$message.warning('请选择处理状态');
        return;
      }
      // 这里可以添加提交逻辑
      if(this.currentAlert.type == 'health') {
        this.$api.healthHandle({
            id: this.currentAlert.id,
            status: this.form.status,
            msg: this.form.desc,
            region_id: this.cityId, 
        }).then(res => {
            if(res.code == 0) {
                // console.log('89898',res.data)
                this.$message.success('处理信息已提交');
                // 更新数据
                this.$emit('updateAlert')
                this.handleClose()
            }
        })
      }else {
        this.$api.safeHandle({
            id: this.currentAlert.id,
            status: this.form.status,
            msg: this.form.desc,
            region_id: this.cityId, 
        }).then(res => {
            if(res.code == 0) {
                // console.log('89898',res.data)
                this.$message.success('处理信息已提交');
                this.$emit('updateAlert')
                this.handleClose()
            }
        })
      }
    },
    getDataInfo() {
        if(this.currentAlert.type == 'health') {
            this.$api.healthDataInfo({
                id: this.currentAlert.id
            }).then(res => {
                if(res.code == 0) {
                    // console.log('89898',res.data)
                    let detail = res.data;
                    detail.process_status_name = detail.process_status == 1 ? '未处理' : (detail.process_status == 2 ? '处理中' : '已处理')
                    this.detail = detail

                }
            })
        }else {
            this.$api.safeDataInfo({
                id: this.currentAlert.id
            }).then(res => {
                if(res.code == 0) {
                    // console.log('89898',res.data)
                    let detail = res.data;
                    detail.process_status_name = detail.process_status == 1 ? '未处理' : (detail.process_status == 2 ? '处理中' : '已处理')
                    this.detail = detail
                }
            })
        }
    },
  }
};
</script>

<style  scoped>
 .alert-dialog {
  background: #fff!important;
  color: #1F1F1F;
}
 /deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(0,0,0,0.2)!important;
}
 /deep/ .el-dialog__title {
   color: #1F1F1F!important;
      font-weight: bold!important;
}
 /deep/ .el-dialog__body {
    padding: 0.25rem!important;
}
 /deep/ .alert-info {
     margin-bottom: 40px;
}
.label {
    color: #1F1F1F;
    width: 60px;
    margin-right: 10px;
}
.form-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.label {
    width: 80px;
    color: #1F1F1F;
}
.el-select, .el-textarea {
    flex: 1;
}
 /deep/ .el-dialog__footer {
    text-align: center!important;
}

.inputright {
  margin-right: 20px;
}
.submit {
  background: #11FFD7;
  color: #001719;
  border: none;
}
.el-button--primary:hover {
    background: #11FFD7;
    border-color: #11FFD7;
    color: #001719;
}

.personInfo {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 60px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: #11FFD7;
  color: #001719;
  font-size: 12px;
  cursor: pointer;
}
</style>